<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局</title>
<style>
    body
{ 
    margin: 0;
    height: 100vh;
    background: #eee; 
}
/* *{
    border:1px solid black;
} */
.yinying{
    box-shadow:rgb(0 0 0 /20%) 0px 2px 1px -1px,
    rgb(0 0 0 /14%)0px 1px 1px 0px,rgb(0 0 0 /12%)0px 1px 3px 0px;
}
.flex{
    display: flex;
}
.baise{
    background-color: white;
}
.toubu{
    background-color: rgb(0, 135, 60);
	text-align: center;
    font-family: "微软雅黑";
}
.flex1{
    flex: 1;
}
.column{
    flex-direction: column;
}
.mg8{
    margin: 8px;
}
.mgr8{
    margin-right: 8px;
}
.mgt8{
    margin-top: 8px;
}
h2 {
      color: #414040bc;
      font-family: "微软雅黑";
}
h3 {
      font-size: 25px;
      font-weight: bold;
      font-family: "微软雅黑";
}
.daohang{
    padding: 10px 00px ;
    border-bottom: 1px solid rgb(172, 170, 170);
    font-size: 20px;
    color: black;
    text-align: center;
}
.center {
  text-align: center;
  position: absolute;
  bottom: 10px;
  font-size: 20px;
}
body{
    font-weight: bold;/* 加粗字体 */
}
.p{
    font-size: 35px;
    color: white;
    font-family: "微软雅黑";
    letter-spacing: 3px; /* 字符之间增加2像素的间距 */
    vertical-align: middle;
}

.container {
            width: 90%;
            margin: 20px auto;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        ul li {
            background-color: #d4d1d1;
            margin: 5px 0;
            padding: 10px;
            border-radius: 5px;
            font-family: "微软雅黑";
        }
        .section {
            margin-bottom: 30px;
        }
        .section h2 {
            border-bottom: 3px solid #333;
            padding-bottom: 5px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 10px;
        }
        .grid-item {
            background-color: #eee;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
        }
        .grid-item h3 {
            margin-top: 0;
        }
        .contact-info {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .contact-info div {
            background-color: #eee;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            flex: 1;
            margin: 0 10px;
            font-family: "微软雅黑";
            font-size:18px;
        }
        
.two-columns {
    column-count: 2;
    column-gap: 20px; /* 列之间的间距 */
}
/* 滚动容器样式 */
.carousel-container {
            width: 100%;
            overflow: hidden; /* 隐藏超出部分 */
            position: relative;
            white-space: nowrap; /* 防止图片换行 */
            background-color: #E0E0E0; /* 背景 */
            padding: 20px 0; /* 上下内边距 */
        }

        /* 图片列表样式 */
        .carousel-track {
            display: inline-block;
            animation: scroll 60s linear infinite; /* 动画效果 */
        }

        /* 图片样式 */
        .carousel-track img {
            width: 300px; /* 每张图片的宽度 */
            height: auto;
            margin-right: 0px; /* 图片之间的间距 */
            display: inline-block;
        }

        /* 定义滚动动画 */
        @keyframes scroll {
            0% {
                transform: translateX(0); /* 初始位置 */
            }
            100% {
                transform: translateX(-100%); /* 向左滚动100% */
            }
        }

        /* 鼠标悬停时暂停动画 */
        .carousel-container:hover .carousel-track {
            animation-play-state: paused;
        }

        /* 左右按钮和文字容器样式 */
        .carousel-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px; /* 按钮和文字之间的间距 */
            margin-bottom: 10px; /* 与图片列表的间距 */
        }

        /* 左右按钮样式 */
        .carousel-button {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border:none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 18px;
            border-radius: 5px; /* 圆角 */
        }

        /* 文字样式 */
        .carousel-text {
            font-size: 25px;
            color: white;
            font-weight: bold;
            background-color: #757575;
            text-align: center; /* 文字居中 */
            width: 100%; /* 宽度铺满 */
        }
        /* 对齐按钮和文字 */
         /* 头部容器 */
        .header-container {
            background-color: rgb(0,135,60);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            position: relative;
        }
          /* 校徽样式 */
        .xiaohui{
	    position: absolute;
	    top: 10px; /* 校徽与标题之间的间距 */
	    left: 10px;
	    display: block; /* 确保图片显示 */
        }
        
        /* 标题容器 */
        .title-container {
            flex: 1;
            text-align: center;
        }
        
        /* 中文标题 */
        .chinese-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
            letter-spacing: 2px;
        }
        
        /* 英文标题 */
        .english-title {
            font-size: 16px;
            letter-spacing: 1px;
        }
        
        /* 用户信息区域 */
        .user-info {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
        }
        
        .welcome {
            margin-right: 15px;
            font-size: 16px;
        }
        
        button {
            font-size: 14px;
            padding: 5px 10px;
            border: 1px solid white;
            border-radius: 3px;
            background: transparent;
            color: white;
            cursor: pointer;
        }
</style>
</head>

    </div>
    <!--主区域--> 
    <div class="flex1 flex column">
       
        <!-- 头部区域 -->
    <div class="header-container">
        <!-- 校徽 -->
       <img 
		     src="images/footer_logo.png"
		    width="190px"
		    height="60px"
		    class="xiaohui">
        
        <!-- 标题 -->
        <div class="title-container">
            <div class="chinese-title">河套灌区农业面源污染决策支持系统</div>
            <div class="english-title">Decision Support System for Agricultural Non-Point Source Pollution in the Hetao Irrigation District</div>
        </div>
        
        <!-- 用户信息 -->
        <div class="user-info">
            <span class="welcome">用户您好</span>
            <button type="button" onclick="window.location.href='封面.html'">退出登录</button>
        </div>
    </div>
    </div>
	<div class="container">
        <div class="section">
            <h2>系统内容</h2>
            <div class="flex1 flex"> 
                <!--图表区--> 
                <div style="flex: 3;" class="flex column mg8 carousel-container ">
                <div class="carousel-container">
                    <div class="carousel-track">
                        <img src="images/TN污染负荷202505(1).png" alt="Image 1">
                        <img src="images/TN污染负荷202505(2).png" alt="Image 2">
                        <img src="images/TN污染负荷202505(3).png" alt="Image 3">
                        <img src="images/TN污染负荷202505(4).png" alt="Image 4">
                        <img src="images/TN污染负荷202505(5).png" alt="Image 5">
                        <img src="images/TN污染负荷202505(6).png" alt="Image 6">
                        <img src="images/TN污染负荷202505(7).png" alt="Image 7">
                        <img src="images/TN污染负荷202505(8).png" alt="Image 8">
                        <img src="images/TN污染负荷202505(9).png" alt="Image 9">
                        <img src="images/TN污染负荷202505(10).png" alt="Image 10">
                        <img src="images/TN污染负荷202505(11).png" alt="Image 11">
                        <img src="images/TN污染负荷202505(12).png" alt="Image 12">
                        <!-- 重复图片以实现无缝滚动 -->
                        <img src="images/TN污染负荷202505(1).png" alt="Image 1">
                        <img src="images/TN污染负荷202505(2).png" alt="Image 2">
                        <img src="images/TN污染负荷202505(3).png" alt="Image 3">
                        <img src="images/TN污染负荷202505(4).png" alt="Image 4">
                        <img src="images/TN污染负荷202505(5).png" alt="Image 5">
                        <img src="images/TN污染负荷202505(6).png" alt="Image 6">
                        <img src="images/TN污染负荷202505(7).png" alt="Image 7">
                        <img src="images/TN污染负荷202505(8).png" alt="Image 8">
                        <img src="images/TN污染负荷202505(9).png" alt="Image 9">
                        <img src="images/TN污染负荷202505(10).png" alt="Image 10">
                        <img src="images/TN污染负荷202505(11).png" alt="Image 11">
                        <img src="images/TN污染负荷202505(12).png" alt="Image 12">
                    </div>
                    <!-- 左右按钮 -->
                    <div class="carousel-controls">
                        <button class="carousel-button prev" onclick="scrollCarousel(-1)">&#10094;</button>
                        <div class="carousel-text">2012-2023河套灌区TN农业面源污染负荷图</div>
                        <button class="carousel-button next" onclick="scrollCarousel(1)">&#10095;</button>
                    </div>
                </div>
                <script>
                    // 手动翻动函数  滚动动画
                    function scrollCarousel(direction) {
                        const track = document.querySelector('.carousel-track');
                        const scrollAmount = 310; // 每次滚动的距离（图片宽度 + 间距）
                        track.style.transition = 'transform 0.5s ease'; // 添加平滑过渡效果
                        track.style.transform = `translateX(${direction * scrollAmount}px)`;
            
                        // 重置动画
                        setTimeout(() => {
                            track.style.transition = 'none';
                            if (direction === 1) {
                                track.appendChild(track.firstElementChild); // 将第一张图片移到末尾
                            } else {
                                track.prepend(track.lastElementChild); // 将最后一张图片移到开头
                            }
                            track.style.transform = 'translateX(0)';
                        }, 500);
                    }
                </script>
                <!-- 第二组图片-->
                    <div class="carousel-container">
                        <!-- 图片轨道 -->
                        <div class="carousel-track">
                            <img src="images/D.jpg" alt="Image 21">
                            <img src="images/R.jpg" alt="Image 22">
                            <img src="images/A.jpg" alt="Image 23">
                            <img src="images/S.jpg" alt="Image 24">
                            <img src="images/T.jpg" alt="Image 25">
                            <img src="images/I.jpg" alt="Image 26">
                            <img src="images/C.jpg" alt="Image 27">
                        <!-- 重复图片以实现无缝滚动 -->
                            <img src="images/D.jpg" alt="Image 21">
                            <img src="images/R.jpg" alt="Image 22">
                            <img src="images/A.jpg" alt="Image 23">
                            <img src="images/S.jpg" alt="Image 24">
                            <img src="images/T.jpg" alt="Image 25">
                            <img src="images/I.jpg" alt="Image 26">
                            <img src="images/C.jpg" alt="Image 27">
                        </div>
                    <!-- 左右按钮 -->
                         <div class="carousel-controls">
                             <button class="carousel-button prev" onclick="scrollCarousel2(-1)">&#10094;</button>
                             <div class="carousel-text">地下水水文地质环境</div>
                             <button class="carousel-button next" onclick="scrollCarousel2(1)">&#10095;</button>
                         </div>
                    </div>
                </div>
               <script>
                // 第二组轮播图滚动函数
                function scrollCarousel2(direction) {
                const track = document.querySelector('#second-carousel .carousel-track');
                const scrollAmount = 310;
                track.style.transition = 'transform 0.5s ease';
                track.style.transform = `translateX(${direction * scrollAmount}px)`;

                setTimeout(() => {
                track.style.transition = 'none';
                if (direction === 1) {
                track.appendChild(track.firstElementChild);
                } else {
                track.prepend(track.lastElementChild);
                }
                track.style.transform = 'translateX(0)';
                }, 500);
                
                }
                </script>
                <!--数据区--> 
                <div style="flex: 5;" class="flex column mg8 ">
                     <div class="grid ">
                    <div class="grid-item">
                        <h3>属性数据库</h3>
                        <ul>
                            <li><a href="#"onclick="window.location.href='pages/weather.html'"class="plain-link">气象数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/agriculture.html'"class="plain-link">农业数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/pa.html'"class="plain-link">作物播种面积</a></li>
                            <li><a href="#"onclick="window.location.href='pages/cty.html'"class="plain-link">作物产量数据</a></li>
                            <li><a href="#" onclick="window.location.href='pages/ypm.html'"class="plain-link">作物亩产数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/gyy.html'"class="plain-link">工业源数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/lpf.html'"class="plain-link">畜禽养殖场数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/xqyz.html'"class="plain-link">畜禽养殖数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/rp.html'"class="plain-link">农村人口数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/gd.html'"class="plain-link">地下水埋深数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/gq.html'"class="plain-link">地下水水质数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/swq.html'"class="plain-link">地表水水质数据</a></li>
                        </ul>
                    </div>
                    <div class="grid-item">
                        <h3>空间数据库</h3>
                        <ul>
                            <li><a href="#"onclick="window.location.href='pages/包气带介质类型.html'"class="plain-link">包气带介质类型</a></li>
                            <li><a href="#"onclick="window.location.href='pages/土壤介质.html'"class="plain-link">土壤介质</a></li>
                            <li><a href="#"onclick="window.location.href='pages/坡度.html'"class="plain-link">坡度数据</a></li>
                            <li><a href="#"onclick="window.location.href='pages/地下水埋深.html'"class="plain-link">地下水埋深</a></li>
                            <li><a href="#"onclick="window.location.href='pages/含水层厚度.html'"class="plain-link">含水层厚度</a></li>
                            <li><a href="#"onclick="window.location.href='pages/垂向净补给量.html'"class="plain-link">垂向净补给量</a></li>
                            <li><a href="#"onclick="window.location.href='pages/含水层渗透系数.html'"class="plain-link">含水层渗透系数</a></li>
                            <li><a href="#"onclick="window.location.href='pages/河套灌域、渠沟.html'"class="plain-link">河套灌域、渠沟</a></li>
                            <li><a href="#"onclick="window.location.href='pages/乡镇行政区划.html'"class="plain-link">乡镇行政规划图</a></li>
                        </ul>
                    </div>
                    <div class="grid-item">
                        <h3>模型库</h3>
                        <ul>
                            <li><a href="#"onclick="window.location.href='pages/案例.html'"class="plain-link">案例</a></li>
                            <li><a href="#"onclick="window.location.href='pages/模拟.html'"class="plain-link">模拟</a></li>
                            <li><a href="#"onclick="window.location.href='pages/河套灌区农业面源污染负荷.html'"class="plain-link">河套灌区农业面源污染负荷</a></li>
                        </ul>
                    </div>
                    <div class="grid-item">
                        <h3>知识库</h3>
                        <ul>
                            <li><a href="#"onclick="window.location.href='pages/地表水环境质量标准.html'"class="plain-link">地表水环境质量标准</a></li>
                            <li><a href="#"onclick="window.location.href='pages/地下水质量标准.html'"class="plain-link">地下水质量标准</a></li>
                            <li><a href="#"onclick="window.location.href='pages/土壤环境质量-建设用地土壤污染风险管控标准.html'"class="plain-link">土壤环境质量-建设用地土壤污染风险管控标准</a></li>
                            <li><a href="#"onclick="window.location.href='pages/土壤环境质量-农用地土壤污染风险管控标准.html'"class="plain-link">土壤环境质量-农用地土壤污染风险管控标准</a></li>
                            <li><a href="#"onclick="window.location.href='pages/畜禽养殖业污染物排放标准.html'"class="plain-link">畜禽养殖业污染物排放标准</a></li>
                            <li><a href="#"onclick="window.location.href='pages/生活污染源产排污系数手册.html'"class="plain-link">生活污染源产排污系数手册</a></li>
                            <li><a href="#"onclick="window.location.href='pages/水产养殖业污染源产排污系数手册.html'"class="plain-link">水产养殖业污染源产排污系数手册</a></li>
                            <li><a href="#"onclick="window.location.href='pages/畜禽养殖业产排污系数手册.html'"class="plain-link">畜禽养殖业产排污系数手册</a></li>
                            <li><a href="#"onclick="window.location.href='pages/排放源统计调查产排污核算方法和系数手册.html'"class="plain-link">排放源统计调查产排污核算方法和系数手册</a></li>
                        </ul>
                    </div>
                    <div class="grid-item">
                        <h3>相关网站</h3>
                        <ul>
                            <li><a href="https://www.mee.gov.cn/" class="plain-link">生态环境部</a></li>
                            <li><a href="https://www.moa.gov.cn/" class="plain-link">农业农村部</a></li>
                            <li><a href="http://www.zghtgq.cn/" class="plain-link">河套灌区水利发展中心</a></li>
                            <li><a href="https://sklawr.cau.edu.cn/" class="plain-link">农业水资源高效利用全国重点实验室</a></li>
                            <li><a href="http://ciicta.cau.edu.cn/" class="plain-link">中国-以色列国际农业培训中心</a></li>
                        </ul>
                    </div>
                    <style>
                        .plain-link {
                            color: inherit; /* 继承父元素颜色 */
                            text-decoration: none; /* 去掉下划线 */
                        }
                        .plain-link:hover {
                            color: inherit; /* 悬停时保持颜色不变 */
                            text-decoration: none; /* 确保悬停时也无下划线 */
                            /* 可以添加其他悬停效果，如： */
                            opacity: 0.8;
                        }
                        </style>
                </div>
            </div>
        </div>
		<div class="section">
			<h2>系统介绍</h2>
			<div class="contact-info">	
                <div style="text-indent: 2em; line-height: 1.6; text-align: justify; word-break: break-word;">
                 河套灌区农业面源污染决策支持系统是为河套灌区农业环境管理提供科学决策支持的综合性平台。系统整合了气象、农业、水质等多源数据，通过模型分析和可视化展示，为农业面源污染防治提供决策依据。系统功能包括数据采集、存储、分析、模型模拟和决策支持等模块，能够全面评估农业面源污染状况，预测污染趋势，优化污染防治措施，提高农业环境管理水平。
                </div>
            </div>
        </div>
        <div class="section">
            <h2>关于我们</h2>
            <div class="contact-info">
                <div>Email:1048405825@qq.com</div>
                <div>中国农业大学 版权所有 ©2025</div>
                <div>单位：中国-以色列国际农业培训中心</div>
                <div>地址：北京市海淀区学院路街道清华东路17号</div>
            </div>
        </div>
    </div>
    <!-- 数据获取脚本 -->
    <script>
        async function loadAgricultureData() {
            try {
                const apiUrl = 'https://agnsp-peueslfkop.cn-beijing.fcapp.run';
                const response = await fetch(apiUrl);
                const result = await response.json();
                
                console.log('从阿里云数据库获取的数据:', result);
                
                if (result.success && result.data) {
                    // 在这里处理数据
                    console.log('获取到数据条数:', result.data.length);
                    // 调用函数来显示数据
                    displayDataInPage(result.data);
                }
            } catch (error) {
                console.error('获取数据失败:', error);
            }
        }

        // 页面加载时执行
        window.addEventListener('load', loadAgricultureData);
    </script>
</body>
</html>